$(function () {
    // var data = {
    //     bigImgs: [
    //         "./images/no7day/1_3.jpg",
    //         "./images/no7day/2_3.jpg",
    //         "./images/no7day/3_3.jpg",
            
    //     ],
    //     middleImgs: [
    //         "./images/no7day/1_2.jpg",
    //         "./images/no7day/2_2.jpg",
    //         "./images/no7day/3_2.jpg",
    //     2
    //     ],
    //     smallImgs: [
    //         "./images/no7day/1_1.jpg",
    //         "./images/no7day/2_1.jpg",
    //         "./images/no7day/3_1.jpg",
            
          
    //     ]
    // }
    // console.log(data);
    $.ajax({
        url: './api/prodList',
    }).then(function (res) {
        let { msg, data } = res;
        let {bigImg,midImg,smalImg}=data[0].imgs;
        let bigImgs=bigImg;
        let middleImgs=midImg;
        let smallImgs=smalImg;
        let data1={bigImgs,middleImgs,smallImgs}
        console.log(data1);
        $('.tb-gallery').Zoom({ el: '.tb-gallery', data: data1 })
        
    })
    
    
})
$.fn.extend({
    Zoom({ el, data }) {
        class MyZoom {
            constructor({ el, data }) {
                this.el = $(el);
                this.oMiddleImg = this.el.children().eq(0)//中图
                
                this.oMiddleArea = this.oMiddleImg.find('.ks-imagezoom-lens');//中区域
                
                this.oSmall = $('.tb-thumb-warp').find('ul');//小图
                
                this.oBigArea = $('.ks-overlay')//大区域
                this.oBigImg = $('.ks-overlay').find('img');//大图
                
    //             //外部数据,赋值一份
                this.data = data;
    //             //拿大data后,进行渲染数据
                this.render()
    //             //调整小区域的大小
    //             // 中区域= (中图/大图)*大区域
                // this.tabChange();
                this.oMiddleArea.css({
                    width: this.oMiddleImg.width() / this.oBigImg.width() * this.oBigArea.width(),
                    height: this.oMiddleImg.height() / this.oBigImg.height() * this.oBigArea.height()
                })
                this.mouseHandler();
                this.changeImage();
                $(document).on('logd', () => {

                })
                this.$scale = parseInt(this.oBigImg.width()) / parseInt(this.oMiddleImg.width())
             
            }
            
            render() {
                let { bigImgs, middleImgs, smallImgs } = this.data;
                var strHtml = ``
                
                smallImgs.forEach((item, index) => {
                    
                    strHtml += `<li><img data-index=${index} src=${item}></li>`;
                    return strHtml;
                });
                $(this.oSmall).html(strHtml);
                $('.tb-thumb li').eq(0).addClass('tb-selected')
                $(this.oMiddleImg).find('img').attr('src', $(middleImgs)[0])
                $(this.oBigImg).attr('src', $(bigImgs)[0])
            }
            mouseHandler() {
                $(this.oMiddleImg).on('mouseenter', () => {
                    $(this.oMiddleArea).css('display', 'block');
                    $(this.oBigArea).css('display', 'block');
                    $('.tb-booth').find('.tb-zoomIcn').css('display','none')

                    $(this.oMiddleImg).on('mousemove', (e) => {
                        let mX = e.pageX - $(this.oMiddleImg).offset().left - $(this.oMiddleArea).width() / 2;
                        let mY = e.pageY - $(this.oMiddleImg).offset().top - $(this.oMiddleArea).height() / 2;
                        if (mX < 0) {
                            mX = 0
                        }
                        if (mX >= $(this.oMiddleImg).innerWidth() - $(this.oMiddleArea).innerWidth()) {
                            mX = $(this.oMiddleImg).innerWidth() - $(this.oMiddleArea).innerWidth()
                        }
                        if (mY <= 0) {
                            mY = 0;
                        }
                        if (mY >= $(this.oMiddleImg).innerHeight() - $(this.oMiddleArea).innerHeight()) {
                            mY = $(this.oMiddleImg).innerHeight() - $(this.oMiddleArea).innerHeight()
                        }
                        
                        $(this.oMiddleArea).css('left', mX + 'px');
                        $(this.oMiddleArea).css('top', mY + 'px');
                        $(this.oBigImg).css('left', mX * -this.$scale + 'px')
                        $(this.oBigImg).css('top', mY * -this.$scale + 'px')
                    })
                })
                $(this.oMiddleImg).on('mouseleave', () => {
                    $(this.oMiddleArea).css('display', 'none');
                    $(this.oBigArea).css('display', 'none');
                    $('.tb-booth').find('.tb-zoomIcn').css('display','block')

                })
            }
            changeImage() {
                let { bigImgs, middleImgs, smallImgs } = this.data;
                
                $(this.oSmall).on('click', (e) => {
                    let ele = e.target;
                    if (ele.nodeName != 'IMG') {
                        return;
                    }
                    let index = $(ele).eq(0).attr('data-index')
                    $('.tb-thumb').find('li').eq(index).addClass('tb-selected').siblings().removeClass('tb-selected')
                    $(this.oMiddleImg).find('img').attr('src', middleImgs[index])
                    $(this.oBigImg).attr('src', bigImgs[index])
                })

            }
            
        }






        new MyZoom({ el, data })
    }
})